<template>
    <!-- 我的订单 -->
    <!-- yb 2023年4月4日 16点43分 -->
    <div class="divv">
        <div id="my_order_box">
            <!-- 头部 -->
            <el-card class="my_order_header">
                我的订单
            </el-card>
            <!-- main -->
            <el-card class="my_order_main">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="全部订单" name="0">
                        <v-orderList ref="orderListComponents1" :flag="0"></v-orderList>
                    </el-tab-pane>
                     <el-tab-pane label="待付款" name="1" >
                        <v-orderList ref="orderListComponents2" :flag="1"></v-orderList>
                    </el-tab-pane>
                    <el-tab-pane label="待收货" name="3" >
                        <v-orderList ref="orderListComponents3" :flag="3"></v-orderList>
                    </el-tab-pane>
                  <el-tab-pane label="待评价" name="9" >
                        <v-orderList ref="orderListComponents4" :flag="9"></v-orderList>
                    </el-tab-pane> 
                </el-tabs>
            </el-card>
        </div>
    </div>
</template>

<script>
import OrderListVue from '@/components/order/OrderList.vue';
export default {
    data () {
        return {
            // 与选项卡绑定值 value 对应的标识符，表示选项卡别名
            activeName: '0',
        }
    },
    components:{
        'v-orderList': OrderListVue,
    },
    mounted () {
        // document.getElementById("my_order_box").style.backgroundColor = this.$mainColor
        // 初始化获取订单信息列表
        this.getOrderListAll()
    },
    methods: {
        // 获取订单信息列表
        getOrderListAll () {
            // console.log(this.activeName)
            // 获取全部订单信息
            if(this.activeName==='0'){
                this.$refs.orderListComponents1.getStatus(this.activeName);
            }
            // 获取代付款订单信息
            if(this.activeName==='1'){
                this.$refs.orderListComponents2.getStatus(this.activeName);
            }
            // 获取待收货订单信息
            if(this.activeName==='3'){
                this.$refs.orderListComponents3.getStatus(this.activeName);
            }
            // 获取待评价订单信息
            if(this.activeName==='9'){
                this.$refs.orderListComponents4.getStatus(this.activeName);
            }
        },
        // 标签页click触发方法
        handleClick(tab, event) {
            this.activeName = tab.name
            this.getOrderListAll()
        },
        
    }
}
</script>

<style scoped>
.divv{
    width: 100%;
    height: 100%;
    background-color: #F5F5F5;
}
#my_order_box{
    width: 100%;
    height: 100%;
    margin: auto;
    background-color: #F5F5F5;
}
.my_order_main{
    margin-top: 10px;
}
</style>